/** 彩色色环色卡 */
export const CHART_THEME_COLOR = [
  '#2f54eb',
  '#2f8beb',
  '#2fc7eb',
  '#30e597',
  '#9adb28',
  '#ccde25',
  '#e7cd2c',
  '#e48033',
  '#ea3b3b',
  '#ee2c8d',
  '#dd21dc',
  '#802feb',
];
/** primary色渐浅梯度色卡 */
export const CHART_THEME_PRIMARY_COLOR = [
  'rgba(47, 84, 235, 1)',
  'rgba(47, 84, 235, .9)',
  'rgba(47, 84, 235, .8)',
  'rgba(47, 84, 235, .7)',
  'rgba(47, 84, 235, .6)',
  'rgba(47, 84, 235, .5)',
  'rgba(47, 84, 235, .4)',
  'rgba(47, 84, 235, .3)',
  'rgba(47, 84, 235, .2)',
];
const OPACITY = 1;
const LABEL_COLOR = '#1A1A1A';
export default {
  color: CHART_THEME_COLOR,
  textStyle: {},
  grid: {
    containLabel: true,
    top: 20,
    right: 0,
    bottom: 0,
    left: 0,
  },
  title: {
    textStyle: {
      fontSize: 14,
      color: '#1A1A1A',
      fontWeight: 600,
    },
    subtextStyle: {
      color: '#19191D',
      fontSize: 24,
      fontWeight: 600,
    },
  },
  line: {
    itemStyle: {
      borderWidth: '2',
    },
    lineStyle: {
      width: '2',
      opacity: OPACITY,
    },
    areaStyle: {
      opacity: 0.2,
      origin: 'auto',
    },
    symbolSize: '4',
    symbol: 'emptyCircle',
    showSymbol: false,
    // smooth: true,
  },
  radar: {
    itemStyle: {
      borderWidth: '2',
    },
    lineStyle: {
      width: '2',
    },
    symbolSize: '6',
    symbol: 'emptyCircle',
    smooth: false,
  },
  bar: {
    itemStyle: {
      barBorderWidth: '0',
      barBorderColor: '#ffffff',
      borderRadius: 0,
      opacity: OPACITY,
    },
    barWidth: 30,
  },
  pie: {
    itemStyle: {
      opacity: OPACITY,
      borderWidth: '0',
      borderColor: '#ffffff',
    },
    radius: ['35%', '75%'],
    center: ['50%', '50%'],
    startAngle: 90,
    label: {
      color: LABEL_COLOR,
      fontWeight: 400,
      formatter: '{d}%',
    },
    labelLine: {
      show: true,
      length: 10,
      length2: 20,
    },
    emphasis: {
      scaleSize: 5,
      itemStyle: {
        opacity: 1,
      },
    },
  },
  scatter: {
    itemStyle: {
      color: 'rgba(47,84,235,0.5)',
      borderWidth: '2',
      borderColor: '#ffffff',
      opacity: 1,
    },
  },
  boxplot: {
    itemStyle: {
      borderWidth: '0',
      borderColor: '#ffffff',
    },
  },
  parallel: {
    itemStyle: {
      borderWidth: '0',
      borderColor: '#ffffff',
      opacity: OPACITY,
    },
  },
  sankey: {
    itemStyle: {
      borderWidth: '0',
      borderColor: '#ffffff',
      opacity: OPACITY,
    },
  },
  funnel: {
    itemStyle: {
      borderWidth: '0',
      borderColor: '#ffffff',
      opacity: OPACITY,
    },
  },
  gauge: {
    itemStyle: {
      borderWidth: '0',
      borderColor: '#ffffff',
      opacity: OPACITY,
    },
  },
  candlestick: {
    itemStyle: {
      color: '#eb8146',
      color0: 'transparent',
      borderColor: '#d95850',
      borderColor0: '#58c470',
      borderWidth: '2',
    },
  },
  graph: {
    itemStyle: {
      borderWidth: '0',
      borderColor: '#ffffff',
    },
    lineStyle: {
      width: 1,
      color: '#aaa',
    },
    symbolSize: '6',
    symbol: 'emptyCircle',
    smooth: false,
    color: [
      '#6b88ff',
      '#5eb2fc',
      '#3fd2e0',
      '#5fe1a4',
      '#c7e677',
      '#fcd55e',
      '#fcb35e',
      '#fc985e',
      '#ff7272',
      '#f45a9a',
      '#da5efc',
      '#b45efc',
      '#956eff',
    ],
    label: {
      color: '#ffffff',
    },
  },
  map: {
    itemStyle: {
      areaColor: '#f3f3f3',
      borderColor: '#999999',
      borderWidth: 0.5,
    },
    label: {
      color: '#893448',
    },
    emphasis: {
      itemStyle: {
        areaColor: '#ffb248',
        borderColor: '#eb8146',
        borderWidth: 1,
      },
      label: {
        color: '#893448',
      },
    },
  },
  geo: {
    itemStyle: {
      areaColor: '#f3f3f3',
      borderColor: '#999999',
      borderWidth: 0.5,
    },
    label: {
      color: '#893448',
    },
    emphasis: {
      itemStyle: {
        areaColor: '#ffb248',
        borderColor: '#eb8146',
        borderWidth: 1,
      },
      label: {
        color: '#893448',
      },
    },
  },
  categoryAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: '#d8dfea',
      },
    },
    axisTick: {
      show: false,
    },
    nameTextStyle: {
      color: '#19191d',
      fontSize: 13,
    },
    axisLabel: {
      color: '#999999',
      fontSize: 12,
      overflow: 'truncate',
      interval: 'auto',
      width: 80,
    },
    boundaryGap: true,
    splitLine: {
      show: false,
    },
    splitArea: {
      show: false,
    },
  },
  valueAxis: {
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: '#333',
      },
    },
    nameTextStyle: {
      color: '#999999',
      fontSize: 12,
    },
    axisLabel: {
      show: true,
      color: '#999999',
    },
    boundaryGap: ['0', '10%'],
    splitLine: {
      show: true,
      lineStyle: {
        color: [
          '#E6E6E6',
        ],
        type: 'dashed',
      },
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: [
          'rgba(250,250,250,0.05)',
          'rgba(200,200,200,0.02)',
        ],
      },
    },
  },
  logAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: '#d8dfea',
      },
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: '#333',
      },
    },
    axisLabel: {
      show: true,
      color: '#19191d',
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: [
          '#f1f1fa',
        ],
      },
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: [
          'rgba(250,250,250,0.05)',
          'rgba(200,200,200,0.02)',
        ],
      },
    },
  },
  timeAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: '#d8dfea',
      },
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: '#333',
      },
    },
    axisLabel: {
      show: true,
      color: '#19191d',
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: [
          '#f1f1fa',
        ],
      },
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: [
          'rgba(250,250,250,0.05)',
          'rgba(200,200,200,0.02)',
        ],
      },
    },
  },
  toolbox: {
    iconStyle: {
      borderColor: '#999999',
    },
    emphasis: {
      iconStyle: {
        borderColor: '#666666',
      },
    },
  },
  legend: {
    textStyle: {
      color: '#19191d',
      inactiveColor: '#9EA2B0',
    },
    icon: 'circle',
    itemWidth: 10,
    itemHeight: 10,
  },
  tooltip: {
    padding: 16,
    backgroundColor: '#1A1A1A',
    borderWidth: 0,
    borderRadius: 8,
    textStyle: {
      color: '#ffffff',
      fontSize: 12,
    },
    axisPointer: {
      z: 1,
      // lineStyle: {
      //   type: 'shadow',
      //   color: '#2F54EB',
      //   opacity: 0.05,
      //   width: 48,
      // },
      // crossStyle: {
      //   color: '#d8dfea',
      //   width: 1,
      // },
    },
  },
  timeline: {
    lineStyle: {
      color: '#893448',
      width: 1,
    },
    itemStyle: {
      color: '#893448',
      borderWidth: 1,
    },
    controlStyle: {
      color: '#893448',
      borderColor: '#893448',
      borderWidth: 0.5,
    },
    checkpointStyle: {
      color: '#eb8146',
      borderColor: '#ffb248',
    },
    label: {
      color: '#893448',
    },
    emphasis: {
      itemStyle: {
        color: '#ffb248',
      },
      controlStyle: {
        color: '#893448',
        borderColor: '#893448',
        borderWidth: 0.5,
      },
      label: {
        color: '#893448',
      },
    },
  },
  visualMap: {
    color: [
      '#6b88ff',
      '#5eb2fc',
      '#3fd2e0',
      '#5fe1a4',
      '#c7e677',
      '#fcd55e',
      '#fcb35e',
      '#fc985e',
      '#ff7272',
      '#f45a9a',
      '#da5efc',
      '#b45efc',
      '#956eff',
    ],
  },
  dataZoom: {
    handleSize: '100%',
    textStyle: {
      color: '#19191D',
    },
  },
  markPoint: {
    label: {
      color: '#ffffff',
    },
    emphasis: {
      label: {
        color: '#ffffff',
      },
    },
  },
};
